<template>
    <div>
        <h2>排房信息显示页面</h2>
        <a href="/pfadd">排房</a>
        <br>
        <a href="/fhxs">房号显示</a>  <br>
        <a href="/fxxs">房型显示</a>

        <table class="table">
            <thead>
                <tr>
                     <td>姓名</td>
                    <td>房号名称</td>
                    <td>房型名称</td>
                    <td>操作</td>
               
                </tr>
            </thead>
            <tbody>
                  <tr v-for="m in data">
                    <td>{{ m.pfmc }}</td>
                    <td>{{ m.fhmc }}</td>
                    <td>{{ m.fxmc }}</td>
                    <td>
                    <input type="button" value="删除" @click="dele(m.pfid)">
                    <input type="button" value="详情" @click="xg(m.pfid)">

                    </td>

                  
                </tr>
            </tbody>
        </table>
        总条数:{{ quer.count }} 每页{{ que.size }}条 总页数:{{ quer.page }} 第{{ que.index }}页
        <input type="button" value="首页" @click="page(1)">
        <input type="button" value="上一页" @click="page(2)">
        <input type="button" v-for="m in quer.page" :value="m"  @click="ym(m)">

        <input type="button" value="下一页" @click="page(3)">
        <input type="button" value="尾页" @click="page(4)">
        <select  v-model="wue.ws" @change="wues">
            <option value="2">每页2条</option>
            <option value="3">每页3条</option>
            <option value="5">每页5条</option>
            <option value="10">每页10条</option>
        </select>
         <input type="number" v-model="wuew.ws">

        <input type="button" value="跳转" @click="tz">
        
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import moment from 'moment';
import { ref,onMounted, compile } from 'vue';
import { useRouter } from 'vue-router';

const stor= useRouter();

const page=(a:any)=>{
    if(a==1){
        que.value.index=1;
        xs();
    }
       if(a==2){
        if(que.value.index>1){
             que.value.index-=1;
        xs();
        }
    
    }
       if(a==3){
        if(que.value.index<quer.value.page){
              que.value.index+=1;
        xs();
        }
      
    }
       if(a==4){
        que.value.index=quer.value.page;
        xs();
    }
}
const ym=(val:any)=>{

    que.value.index=val
    xs();
}
const wue=ref({
    ws:2,
})
const wues=()=>{
    que.value.size=wue.value.ws
    xs();
}
const wuew=ref({
    ws:0,
})
const tz=()=>{
    que.value.index=wuew.value.ws
    xs();
}


const data=ref([{
       "fxid": 2,
      "fhid": 2,
      "pfid": 2,
      "pfmc": "留鸭彬",
      "zt": true,
      "fhmc": "305",
      "fxmc": "三室一厅"
}])

 const que=ref({
    index:1,
    size:2,

    
 })
 const quer=ref({
    count:0,
    page:0,
 })
 onMounted(()=>{
    xs();
 })
 const xs=()=>{
    axios.get("https://localhost:7258/api/pfroom/pfxs",{params:que.value}).then(res=>{
        data.value=res.data.page

        quer.value.count=res.data.count
        quer.value.page=Math.ceil(quer.value.count/que.value.size)

    })
 }
 const dele=(a:any)=>{
      if(!confirm("确认删除吗")){
        return
    }
    axios.delete("https://localhost:7258/api/pfroom/delete",{params:{pfid:a}}).then(res=>{
        if(res.data>0){
            alert("删除成功");
            xs();
        }else{
            alert("删除失败")
        }
    })
 }
 const xg=(a:any)=>{
 
    stor.push({path:"/pfxq",query:{pfid:a}})
}



</script>

<style scoped>

</style>